<template>
    <div class="index-card" @click="$router.push({name: 'autoDetail', query:{autoNo:cardInfo.autoNo}})">
        <div class="index-card-list">
            <span class="index-card-vin">{{cardInfo.vinNo}}</span>
            <span :class="colorClass">{{cardInfo.tmnlRealStatusName || '离线'}}</span>
        </div>
        <div class="index-card-list">
            <span>车牌号</span>
            <span>{{cardInfo.licenseNo}}</span>
        </div>
        <div class="index-card-list">
            <span>总里程(KM)</span>
            <span>{{cardInfo.totalMile}}</span>
        </div>
        <div class="index-card-list">
            <span>总能耗(kWh)</span>
            <span>{{cardInfo.totalEnergy}}</span>
        </div>
        <div class="index-card-list">
            <span>性质</span>
            <span>{{cardInfo.autoAttributeName}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        cardInfo: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data () {
        return {

        }
    },
    mounted () {
        this.init()
    },
    computed: {
        colorClass () {
            let colorClass
            switch (this.cardInfo.tmnlRealStatusName) {
                case '行驶' : colorClass = 'index-card-status-green'; break
                case '休眠' : colorClass = 'index-card-status-yellow'; break
                case '离线' : colorClass = 'index-card-status-grey'; break
                case '偏移围栏' : colorClass = 'index-card-status-red'; break
                default: colorClass = 'index-card-status-grey'; break
            }
            return colorClass
        }
    },
    methods: {
        /* 初始化 */
        init () {

        }
    }
}
</script>

<style lang="less" scoped>

</style>
